<%--
  Created by IntelliJ IDEA.
  User: 王清华
  Date: 2018/4/30
  Time: 18:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="head" tagdir="/WEB-INF/tags/heads" %>
<%@ taglib prefix="foot" tagdir="/WEB-INF/tags/feet" %>
<html>
<head:html-heads pageTitle="用户列表"/>
<body>
<div class="lenos-search">
    <div class="select">
        用户名：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="uname" autocomplete="off">
        </div>
        <button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon layui-icon-search">检索</i>
        </button>
        <button class="layui-btn layui-btn-sm icon-position-button" id="refresh"
                data-type="reload">
            <i class="layui-icon layui-icon-refresh">刷新</i>
        </button>
    </div>

</div>
<div class="layui-col-md12" style="height:40px;margin-top:3px;">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-normal" data-type="add">
            <i class="layui-icon">&#xe608;</i>新增
        </button>
        <button class="layui-btn layui-btn-normal" data-type="changePwd">
            <i class="layui-icon">&#xe605;</i>修改密码
        </button>
    </div>
</div>
<table id="userList" class="layui-hide" lay-filter="user"></table>
<script type="text/html" id="number">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $(".select .select-on").click();
        }
    }
    layui.use('table', function () {
        var table = layui.table;
        //方法级渲染
        table.render({
            id: 'userList',
            elem: '#userList'
            , url: '/api/user/list'
            , cols: [[
                {checkbox: true, fixed: true, width: '5%'}
                ,{field:'zizeng', width:80, title: '序号',fixed: 'left',templet:'#number'}
                , {field: 'id',id:'ID', title: 'ID', width: '5%', sort: true}
                , {
                    field: 'userName',
                    title: '用户名',
                    width: '10%',
                    sort: true,
                    style: 'background-color: #009688; color: #fff;'
                }
                , {field: 'age', title: '年龄', width: '5%', sort: true}
                , {field: 'realName', title: '真实姓名', width: '9%'}
                , {field: 'phoneNumber', title: '联系方式', width: '10%'}
                , {field: 'headPicture', title: '头像', width: '10%'}
                , {field: 'addDate', title: '创建时间', width: '10%'}
                , {field: 'updateDate', title: '修改时间', width: '10%'}
                , {field: 'state', title: '状态', width: '5%',templet:function (a) {
                   return a.state == 1 ? '有效':'无效'
                }}
                , {field: 'right', title: '操作', width: '20%', toolbar: "#barDemo"}
            ]]
            , page: true
            , height: 'full-83'
            , response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'code', //状态字段名称
                statusCode: '1', //状态字段成功值
                msgName: 'msg', //消息字段
                countName: 'count', //总数字段
                dataName: 'data' //数据字段
            }
        });

        var $ = layui.$, active = {

            select: function () {
                var uname = $('#uname').val();
                table.reload('userList', {
                    where: {
                        userName: uname,
                    }
                });
            },
            reload: function () {
                $('#uname').val('');
                $('#email').val('');
                table.reload('userList', {
                    where: {
                        username: null,
                        email: null
                    }
                });
            },
            add: function () {
                add('添加用户', 'showAddUser', 700, 450);
            },
            update: function () {
                var checkStatus = table.checkStatus('userList')
                    , data = checkStatus.data;
                if (data.length != 1) {
                    layer.msg('请选择一行编辑,已选[' + data.length + ']行', {icon: 5});
                    return false;
                }
                update('编辑用户', 'updateUser?id=' + data[0].id, 700, 450);
            },
            detail: function () {
                var checkStatus = table.checkStatus('userList')
                    , data = checkStatus.data;
                if (data.length != 1) {
                    layer.msg('请选择一行查看,已选[' + data.length + ']行', {icon: 5});
                    return false;
                }
                detail('查看用户信息', 'updateUser?id=' + data[0].id, 700, 450);
            },
            changePwd: function () {
                var checkStatus = table.checkStatus('userList')
                    , data = checkStatus.data;
                if (data.length != 1) {
                    layer.msg('请选择一个用户,已选[' + data.length + ']行', {icon: 5});
                    return false;
                }
                rePwd('修改密码', 'goRePass?id=' + data[0].id, 500, 350);
            }
        };

        //监听表格复选框选择
        table.on('checkbox(user)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                detail('编辑用户', 'updateUser?id=' + data.id, 700, 450);
            } else if (obj.event === 'del') {
                layer.confirm('确定删除用户[<label style="color: #00AA91;">' + data.userName + '</label>]?', {
                    btn: '删除'
                }, function () {
                    del(data.id);
                });
            } else if (obj.event === 'edit') {
                update('编辑用户', 'updateUser?id=' + data.id, 700, 450);
            }
        });

        $('.layui-col-md12 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.select .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    function rePwd(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "404.html";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-rePwd',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: title,
            content: url,
        });
    }

    function del(id) {
        $.ajax({
            url: "/api/user/del",
            type: "post",
            data: {id: id},
            async: false,
            success: function (d) {
                if (d.code == 1) {
                    layui.layer.msg(d.msg);
                    layui.table.reload('userList');
                } else {
                    window.top.layer.msg(d.msg, {icon: 5, offset: 'rb', area: ['120px', '80px'], anim: 2});
                }
            }, error: function () {
                alert('error');
            }
        });
    }

    function detail(title, url, w, h) {
        var number = 1;
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "error/404";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-detail',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: title,
            content: url + '&detail=true',
            // btn:['关闭']
        });
    }

    /**
     * 更新用户
     */
    function update(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        if (url == null || url == '') {
            url = "404.html";
        }
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        layer.open({
            id: 'user-update',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url
        });
    }

    /*弹出层*/
    /*
     参数解释：
     title   标题
     url     请求的url
     id      需要操作的数据id
     w       弹出层宽度（缺省调默认值）
     h       弹出层高度（缺省调默认值）
     */
    function add(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "404.html";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-add',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url
        });
    }
</script>
</body>
</html>
